<template>
  <div class="tag">
    <div class="tag-top">
      <!--顶部图片-->
      <div class="tag_header_image" style="width: 100%; height: 30%">
        <img
          src="../../images/resource.jpg"
          style="width: 100%; height: 350px"
        />
        <div class="tag_header_cover">
          <div align="center">
            <div style="position: relative; bottom: -600px">
              <div class="tag_header_title" style="font-family: 'STXingkai'">
                文章标签
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--中间内容-->
      <div class="tag-container">
        <div class="tag-list">
          <div class="tag-item" v-for="item in tagList" :key="item.tagId">
            <a
              href="#"
              :class="[item.articleNum == 0 ? 'disable-a' : '' , activeTagId == item.tagId ? 'tag-active-color' : ''] "
              @click="exchangeTag(item.tagId)"
              class="tag-name"
              >{{ item.tagName }}</a
            >
            <div class="tag-num">{{ item.articleNum }}</div>
            <div class="tag-rhombus"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="tag-bottom">
      <div class="tag-maxtop">
        <i class="iconfont">&#xe63d;</i>
        <p class="tag-type">标签</p>
      </div>
      <div class="minboot">
        <div class="tagboot-left">
          <ul style="margin-bottom: 20px">
            <li v-for="item in articleList" :key="item.articleId">
              <router-link
                :to="{
                  path: '/articleDetail',
                  query: { articleId: item.articleId },
                }"
              >
                <div class="tagbot-left">
                  <div class="tagbot-right">
                    <img :src="item.firstPicture" />
                  </div>
                  <div class="tagbot-more">
                    <h4>{{ item.articleTitle }}</h4>
                    <p>
                      {{ item.articleSummary }}
                    </p>
                    <div class="tag-artcle-icons">
                      <span
                        ><i class="iconfont">&#xe64d;</i
                        >{{ item.updateTime | formatDate }}</span
                      >
                      <span
                        ><i class="iconfont">&#xe670;</i
                        >{{ item.articleViews }}</span
                      >
                      <span
                        ><i class="iconfont">&#xe7f5;</i
                        >{{ item.recommendGrade }}</span
                      >
                    </div>
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="tagboot-right">
          <div class="tag-right-passage">
            <div class="tag-questions">
              <div class="tag-quest"></div>
              <p>热点问题</p>
            </div>
            <hr style="width: 100%; height: 1px; margin-top: 2%" />
            <div class="tag-passage">
              <ul>
                <li v-for="item in articlehotList" :key="item.articledId">
                  <router-link
                    :to="{
                      path: '/articleDetail',
                      query: { articleId: item.articleId },
                    }"
                    :key="item.articleId"
                  >
                    <i class="iconfont">&#xe626;</i>
                    <p>{{ item.articleTitle }}</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "@/assets/css/tag.css";
import {
  getTagList,
  getArticleListByTagId,
  getArticleHotListByTagId,
} from "@/api/tag";
import { formatDate } from "@/utils/date";
export default {
  name: "tag",
  data() {
    return {
      tagList: [],
      tagId: 0,
      articleList: [],
      articlehotList: [],
      activeTagId: 0,
    };
  },
  created() {
    if (this.$route.query.tagId != null) {
      this.tagId = this.$$route.query.tagId
      this.activeTagId = this.tagId;
    }
    this.getTagListFun();
    this.getArticleHotListByTagIdFun();
    this.getArticleListByTagIdFun();
  },
  // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    getTagListFun() {
      getTagList().then((response) => {
        this.tagList = response.data;
        console.log(response.data);
      });
    },
    getArticleListByTagIdFun() {
      const params = {
        tagId: this.tagId,
      };
      getArticleListByTagId(params).then((response) => {
        this.articleList = response.data;
      });
    },
    getArticleHotListByTagIdFun() {
      getArticleHotListByTagId(this.tagId).then((response) => {
        this.articlehotList = response.data;
      });
    },
    exchangeTag(tagId) {
      this.tagId = tagId;
      this.activeTagId = tagId;
      this.getArticleListByTagIdFun();
    },
  },
};
</script>
<style>
.disable-a {
  color: gray;
  cursor: pointer;
  pointer-events: none;
}
.tag-active-color{
  color: pink;
}
</style>
